<template>
	<view class="container pt_8 plr_16 pbsafe_64">
		<view class="p_12 br_8 bc_fff">
			<GoodsCard :data="dataInfo" type="aftersale-card" goodsType="7" />
		</view>
		<view class="p_12 br_8 bc_fff mt_8">
			<view>
				售后方式
			</view>
			<view class="mt_12 fx grid_12">
				<view class="plr_11 lh_30 br_26 fz_12 bo_1 boc_grey" :style="[wayStyle(item.id)]"
					v-for="item,index in waysList" @click="handleClick('waysSelect',item)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="p_12 br_8 bc_fff mt_8">
			<view>
				售后原因
			</view>
			<view class="mt_12 fx grid_12">
				<view class="plr_11 lh_30 br_26 fz_12 bo_1 boc_grey" :style="[reasonStyle(item.id)]"
					v-for="item,index in reasonsList" @click="handleClick('reasonsSelect',item)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="p_12 br_8 bc_fff mt_8">
			<u--textarea v-model="describes" placeholder="详细描述一下您遇到的问题吧" autoHeight maxlength="200"
				border="none"></u--textarea>
			<view class="mt_70">
				<u-upload maxCount="5" multiple width="196" height="196" :fileList="uploadList" @afterRead="afterRead"
					@delete="deletePic" name="list1">
					<view class="fx fx_col aic jcc width_98 height_98 bo_1 boc_999 br_4 box"
						style="border-style: dashed;">
						<u-icon name="camera-fill" size="48rpx" color="#999999">
						</u-icon>
						<view class="fc_999 fz_12 mt_8">
							上传图片
						</view>
					</view>
				</u-upload>
			</view>
		</view>
		<view class="pf b_0 l_0 r_0 plr_16 pbsafe_8 pt_8 bc_fff">
			<button class="custom_btn primary lh_40 w100 fz_14 br_40" :disabled="disableBtn"
				@click="handleSubmit">确认提交</button>
		</view>
	</view>
</template>

<script>
	import GoodsCard from '@/components/goods/GoodsCard.vue'
	import upload from '@/mixins/upload.js'
	import api from '@/service/config/api.js'
	export default {
		mixins: [upload],
		components: {
			GoodsCard
		},
		data() {
			return {
				uploadList: [],
				waysSelect: [],
				reasonsList: [{
					id: 1,
					name: '发错商品'
				}, {
					id: 2,
					name: '商品损坏'
				}, {
					id: 3,
					name: '少件'
				}, {
					id: 4,
					name: '其他'
				}],
				describes: '',
				reasonsSelect: [],
				eId: null,
				oId: null,
				gId: null,
				coId: null,
				dataInfo: {},
				canBeReturn: false,
			}
		},
		computed: {
			wayStyle() {
				return (id) => this.waysSelect.includes(id) ? {
					color: '#F08519',
					borderColor: '#F08519 !important'
				} : {}
			},
			reasonStyle() {
				return (id) => this.reasonsSelect.includes(id) ? {
					color: '#F08519',
					borderColor: '#F08519 !important'
				} : {}
			},
			waysList() {
				return this.canBeReturn ? [{
					id: 1,
					name: '售后维护'
				}, {
					id: 2,
					name: '退货'
				}] : [{
					id: 1,
					name: '售后维护'
				}]
			}
		},
		onLoad(options) {
			if (options.e_id) {
				this.eId = options.e_id
				uni.setNavigationBarTitle({
					title: '查看售后'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '申请售后'
				})
				if (options.o_id && options.g_id && options.co_id) {
					this.oId = options.o_id
					this.gId = options.g_id
					this.coId = options.co_id
					this.$utils.loading()
					api.get('/order/api/order/detail/' + this.oId).then(res => {
						const goodsList = (res.data.orderBrandInfoList && res.data.orderBrandInfoList
							.length) ? res.data.orderBrandInfoList.reduce((arr, item) => {
							return [...arr, ...item.productInfoList]
						}, []) : []
						this.dataInfo = goodsList.find(item => item.productId == this.gId) ?? {}
						this.canBeReturn = res.data.canBeReturn || false
					})
				} else {
					this.$utils.showToast('未查到此订单', 1500, 1)
				}
			}
		},
		methods: {
			handleClick(type, item) {
				// this[type].includes(item.id) ? this[type].splice(this[type].findIndex(item1 => item1 == item.id), 1) :
				// 	this[type].push(item.id)
				this[type].includes(item.id) ? this[type] = [] :
					this[type] = [item.id]
			},
			handleSubmit() {
				if (!this.waysSelect.length) {
					return this.$utils.showToast('请选择售后方式')
				}
				if (!this.reasonsSelect.length) {
					return this.$utils.showToast('请选择售后原因')
				}
				if (!this.describes) {
					return this.$utils.showToast('请输入详细描述')
				}
				this.$utils.loading()
				api.post('/order/api/orderAfterSale', {
					orderId: this.oId,
					orderInfoId: this.coId,
					afterSaleType: this.waysSelect.join(','),
					afterSaleReason: this.reasonsSelect.join(','),
					describes: this.describes,
					imageUrl: this.uploadList.map(item => item.url).join(',')
				}).then(() => {
					this.$utils.showToast('提交成功', 1500, 1, '', 'success')
				})
			}
		},
	}
</script>

<style lang="scss">
	.container {

		/deep/.u-textarea {
			padding: 0 !important;
		}

		/deep/.u-upload__wrap {
			display: grid !important;
			grid-template-columns: repeat(3, 196rpx);
			justify-content: space-between;
			grid-row-gap: 24rpx;
		}
	}
</style>